<template>
    <div class="flex flex-col">
      <h2 
        class="font-bold text-2xl mb-4" 
        v-if="props.title">
        {{ props.title }}
      </h2>
      <ul class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        <li 
          v-for="(item, index) in props.items" 
          :key="item.key" 
          :class="[ { 'bg-blue-200': item.key === state.currentKey, 
          'bg-white': item.key !== state.currentKey, }, 
          'rounded-lg shadow-md p-6 cursor-pointer']" 
          @click="handleSelect(item, index)"
        >
          <div class="font-bold text-lg mb-2">{{ item[props.label] }}</div>
          <div class="text-gray-600">{{ item.description }}</div>
        </li>
      </ul>
    </div>
  </template>
  
<script setup>
import { reactive } from "vue";

const emits = defineEmits(["select"]);
const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  items: {
    type: Array,
    required: true,
  },
  label: {
    type: String,
    default: "title",
  },
});

const state = reactive({
  currentKey: "",
  currentItem: undefined, 
});
const handleSelect = (item, index) => {
  state.currentKey = item.key;
  state.currentItem = item;
  emits("select", item, index);
};  
</script>